<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Kipso - Vue Nuxt Online Education Learning & LMS Template</title>
    <meta name="description" content="" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <link href="assets/js/google-code-prettify/prettify.css" rel="stylesheet" />
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet" />
    <link href="assets/css/documenter_style.css" rel="stylesheet" />

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <style>

    </style>
  </head>
  <body class="documenter-project-Reale Aste-" data-spy="scroll" id="top">
    <!-- Documentation Navbar -->

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a
            class="btn btn-navbar"
            data-toggle="collapse"
            data-target=".nav-collapse"
          >
            <span class="icon-bar"></span> <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Kipso - Vue Nuxt Online Education Learning & LMS Template</a
          >
          <div class="nav-collapse">
            <ul class="nav">
              <li>
                <a href="#documenter_content" title="Theme Installation"
                  >Overview</a
                >
              </li>
              <li>
                <a href="#started" title="Getting started">Getting Started</a>
              </li>
              <li>
                <a href="#structure" title="Structure">Folder Structure</a>
              </li>
              <li><a href="#layout" title="Layout">Layout</a></li>
              <li>
                <a href="#customization" title="Customize">Customization</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- End of Navbar -->

    <!-- Main Container Beginning -->

    <div class="container" id="documenter_content">
      <div id="documenter-cover">
        <div class="masthead">
          <h1 style="text-align: center">
            Kipso - Vue Nuxt Online Education Learning & LMS Template
          </h1>
        </div>
        <!-- masthead -->
        <div id="intro">
          <p class="highlight hero-unit">
            Thank you for purchasing our template. If you have any questions
            that are beyond the scope of this help file, please feel free to
            open a new support request
          </p>
          <h4>
            <b
              >IMPORTANT: It's built with Vue JS and It's not a regular HTML
              Template.</b
            >
          </h4>
        </div>
        <!-- intro -->
      </div>

      <section id="started">
        <div class="page-header">
          <h3>Getting Started</h3>
          <hr class="notop" />
        </div>
        <div class="card">
          <div class="card-header">
            Installation
          </div>
          <div class="card-body">
            <ul>
              <li>
                <b>Node.js and NPM :</b> You can download Node.js from
                https://nodejs.org. NPM comes bundled with Node.js.
              </li>
            </ul>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            Install Npm Packages
          </div>
          <div class="card-body">
            <ul>
              <li>
                First unzip <code>kipso-v1.0.zip</code> you will find two
                folders including <code>kipso</code> (this is your root folder).
                Open this folder with VS Code (or any other you like). And
                follow step below.
              </li>
              <li>
                <b>NPM :</b> You must have to <code>npm install</code> packages.
                You can do this by running npm install from the root of your
                project to install all the necessary dependencies.
              </li>
            </ul>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            Development server
          </div>
          <div class="card-body">
            <ul>
              <li>
                Run <code> npm run dev </code> for a dev server. Navigate to
                http://localhost:3000 . The app will automatically reload if you
                change any of the source files.
              </li>
            </ul>
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            Generate static project
          </div>
          <div class="card-body">
            <ul>
              <li>
                Run <code>npm run generate</code> to generate static project.
                Generated project will be stored in the
                <code>dist/</code> directory.
              </li>
            </ul>
          </div>
        </div>

        <div class="card">
          <div class="card-header">
            Build for production and launch server
          </div>
          <div class="card-body">
            <ul>
              <li>
                Run <code>npm run build</code> and then
                <code>npm run start</code>
              </li>
            </ul>
          </div>
        </div>
      </section>

      <section id="structure">
        <div class="page-header">
          <h3>Folder Structure</h3>
          <hr class="notop" />
        </div>
        <pre>
kipso/
+
├───assets
├───components
├───layouts
├───middleware
├───pages
├───plugins
├───static
│   └───assets
│       ├───css
│       │   └───overlays
│       ├───images
│       │   └───favicons
│       ├───js
│       ├───plugins
│       │   ├───fontawesome-free-5.11.2-web
│       │   │   ├───css
│       │   │   └───webfonts
│       │   └───kipso-icons
│       │       ├───demo-files
│       │       └───fonts
│       └───scss
└───store
+

</pre
        >
        <span
          ><b>Help</b>: For detailed explanation on how things work, check out
          <a href="https://nuxtjs.org/">Nuxt.js docs.</a>
        </span>
      </section>

      <section id="layout">
        <div class="page-header">
          <h3>Layout</h3>
          <hr class="notop" />
        </div>
        <div class="card">
          <div class="card-header">Layout</div>
          <div class="card-body">
            <p><code> kipso/layouts/default.vue </code></p>
            <img src="assets/img/layout.png" alt="" />
          </div>
        </div>

        <div class="card">
          <div class="card-header">Home 1</div>
          <div class="card-body">
            <p><code> kipso/pages/index.vue </code></p>
            <img src="assets/img/home1.png" alt="" />
          </div>
        </div>

        <div class="card">
          <div class="card-header">Home 2</div>
          <div class="card-body">
            <p><code> kipso/pages/index-2.vue </code></p>
            <img src="assets/img/home2.png" alt="" />
          </div>
        </div>

        <div class="card">
          <div class="card-header">Home 3</div>
          <div class="card-body">
            <p><code> kipso/pages/index-3.vue </code></p>
            <img src="assets/img/home3.png" alt="" />
          </div>
        </div>

      </section>

      <section id="customization">
        <div class="page-header">
          <h3>Customization</h3>
          <hr class="notop" />
        </div>
        <div class="card">
          <div class="card-header">
            How to change Logo ?
          </div>
          <p>Open <code>kipso/components/NavOne.vue and NavTwo.vue and NavThree.vue</code></p>
          <div class="card-body">
            <img src="assets/img/logo.png" alt="" />
          </div>
        </div>
        <div class="card">
          <div class="card-header">
            How to change Copyright ?
          </div>
          <p>Open <code>kipso/components/Footer.vue</code></p>
          <div class="card-body">
            <img src="assets/img/copyright.png" alt="" />
          </div>
        </div>
      </section>

      <hr />
      <footer>
        <p>
          Copyright Layerdrops.com - 2020
        </p>
      </footer>
    </div>
    <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script>
      document.createElement("section");
      var duration = "500",
        easing = "swing";
    </script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/jquery.scrollTo.js"></script>
    <script src="assets/js/jquery.easing.js"></script>
    <script src="assets/js/scripts.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-min.js"></script>
  </body>
</html>
